<template>
	<view class="container">
		<view class="status_bar" v-if="type == ''">
			<view style="margin-left: 4%;" @tap="goBack()"><u-icon name="arrow-leftward" size='24' /></view>
			<view style="margin-left: -50upx; font-weight: bold;">我的收藏</view>
			<view style="margin-right: 20upx;"><u-icon name="trash" size='24'></u-icon></view>
		</view>
		<view class="status_bar" v-else>
			<view style="margin-left: 4%;" @tap="goBack()"><u-icon name="arrow-leftward" size='24' /></view>
			<view style="margin-left: -50upx; font-weight: bold;">转发</view>
			<view style="margin-right: 20upx;" @tap="sendmsg">发送</view>
		</view>
		<view class="con-box">
			<view style="margin-bottom: 20upx;">
				<u-search placeholder="请输入您想搜索的内容" v-model="keyword" :actionStyle="actionStyle"
					searchIconColor="#373737" placeholderColor="#b0b0b0" height="80upx"></u-search>
			</view>
			<u-tabs :list="list1" @click="clickTabs" lineColor="#1f7bea"
				:activeStyle="{color: '#2c2c2c',fontWeight: 'bold', transform: 'scale(1.05)'}"></u-tabs>
		</view>
		<view class="select-box" v-if="type == ''">
			<view v-for="(message, index) in listData" :key="index" style="display: flex; padding: 30upx;">


				<view class="name-img">{{message.nickname.slice(0,1)}}</view>
				<view :class="'message-body self1'" v-if="message.contentType == 0">
					<view class="message-text">{{message.dataContent}}</view>
					<view class="message-time">{{message.time}}</view>
				</view>

				<image
					:src="'http://chat.zwsmcn.com:8090/BinaryDownloader?action=image_d&user_uid=' + message.from1 + '&need_dump=0&file_name=th_' + message.dataContent"
					mode="aspectFill" :class="'message-img1'" v-if="message.contentType == 1"></image>

				<view :class="'message-body self1'" v-if="message.contentType == 2" @tap="handleAudio(message)"
					:style="{ width: `${130 + message.contentDuration * 2}rpx` ,'display': 'flex','align-items': 'center'}">
					<view class="voice_icon" :class="[
						{ voice_icon_right: message.from1==fromUserId },
						{ voice_icon_left: message.from1!=fromUserId },
						{ voice_icon_right_an: message.anmitionPlay && message.from1==fromUserId },
						{ voice_icon_left_an: message.anmitionPlay && message.from1!=fromUserId  }
					]"></view>
					<view class="">{{ message.contentDuration }}''</view>
				</view>

				<view :class="'message-body self1'" v-if="message.contentType == 6" @click="showvideo(message)">
					<!-- <image :src="'http://chat.zwsmcn.com:8090/BinaryDownloader?action=image_d&user_uid=' + message.from1 + '&need_dump=0&file_name=th_' + message.dataContent+
								'?vframe/jpg/offset/1'" class="" mode="widthFix"></image> -->

				</view>

				<view :class="'message-body self1'" v-if="message.contentType == 7" style="width:70%;">
					<view class="" style="display: flex;align-items: center;flex:1;height: 90upx;position: relative;">
						<view v-if="message.dataContent.face" style="width: 90upx;height: 90upx;">
							<image :src="message.dataContent.face" class="name-img1"></image>
						</view>
						<view v-else style="width: 90upx;height: 90upx;">
							<view class="name-img1">{{message.dataContent.nickname[0]}}</view>
						</view>
						<view class=""
							style="flex: 1;margin-left: 5px;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden; text-overflow: ellipsis;line-height: 1.5;height: 1.5em;white-space: normal;word-break: break-all;">
							{{message.dataContent.nickname}}
						</view>
					</view>
				</view>

				<view :class="'message-body self1'" v-if="message.contentType == 8" @tap="goNavigation(message)">
					<view class="" style="display: flex;align-items: center;flex: 1;">
						<image class="" src="../../../static/image/icon28@3x.png" mode="aspectFit"
							style="width: 30px;height: 30px;"></image>
						<view class="" style="flex: 1;margin-left: 5px;">
							<view class=""
								style="display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden; text-overflow: ellipsis;line-height: 1.5;height: 1.5em;white-space: normal;word-break: break-all;">
								{{message.dataContent.name}}
							</view>
							<view class=""
								style="font-size: 12px;color: #999;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden; text-overflow: ellipsis;line-height: 1.5;height: 1.5em;white-space: normal;word-break: break-all;">
								{{message.dataContent.address}}
							</view>
						</view>
					</view>
				</view>

				<image :class="'message-red1'" v-if="message.contentType == 10" :src="'../../static/chat/1@3x.png'"
					class="" mode="widthFix" @tap="receiveRed(message)">
				</image>

				<view :class="'message-body self1'" v-if="message.contentType == 11" @tap="goNavigation(message)">
					<view class="" style="display: flex;align-items: center;flex: 1;">
						<image v-if="message.dataContent.length > 0" :src="message.dataContent.pictures[0]"
							class="name-img1"></image>
						<view class="" style="flex: 1;margin-left: 5px;">
							<view class=""
								style="display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden; text-overflow: ellipsis;line-height: 1.5;height: 1.5em;white-space: normal;word-break: break-all;">
								{{message.dataContent.title}}
							</view>
							<view class=""
								style="font-size: 12px;color: #999;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden; text-overflow: ellipsis;line-height: 1.5;height: 1.5em;white-space: normal;word-break: break-all;">
								{{message.dataContent.content}}
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="select-box" v-else>
			<checkbox-group @change.stop="checkboxChange">

				<view v-for="(message, index) in listData" :key="index" style="display: flex; padding: 30upx;">
					<checkbox :value="index" :checked="message.checked" />

					<view class="name-img">{{message.nickname.slice(0,1)}}</view>
					<view :class="'message-body self1'" v-if="message.contentType == 0">
						<view class="message-text">{{message.dataContent}}</view>
						<view class="message-time">{{message.time}}</view>
					</view>

					<image
						:src="'http://chat.zwsmcn.com:8090/BinaryDownloader?action=image_d&user_uid=' + message.from1 + '&need_dump=0&file_name=th_' + message.dataContent"
						mode="aspectFill" :class="'message-img1'" v-if="message.contentType == 1"></image>

					<view :class="'message-body self1'" v-if="message.contentType == 2" @tap="handleAudio(message)"
						:style="{ width: `${130 + message.contentDuration * 2}rpx` ,'display': 'flex','align-items': 'center'}">
						<view class="voice_icon" :class="[
						{ voice_icon_right: message.from1==fromUserId },
						{ voice_icon_left: message.from1!=fromUserId },
						{ voice_icon_right_an: message.anmitionPlay && message.from1==fromUserId },
						{ voice_icon_left_an: message.anmitionPlay && message.from1!=fromUserId  }
					]"></view>
						<view class="">{{ message.contentDuration }}''</view>
					</view>

					<view :class="'message-body self1'" v-if="message.contentType == 6" @click="showvideo(message)">
						<!-- <image :src="'http://chat.zwsmcn.com:8090/BinaryDownloader?action=image_d&user_uid=' + message.from1 + '&need_dump=0&file_name=th_' + message.dataContent+
								'?vframe/jpg/offset/1'" class="" mode="widthFix"></image> -->

					</view>

					<view :class="'message-body self1'" v-if="message.contentType == 7" style="width:70%;">
						<view class=""
							style="display: flex;align-items: center;flex:1;height: 90upx;position: relative;">
							<view v-if="message.dataContent.face" style="width: 90upx;height: 90upx;">
								<image :src="message.dataContent.face" class="name-img1"></image>
							</view>
							<view v-else style="width: 90upx;height: 90upx;">
								<view class="name-img1">{{message.dataContent.nickname[0]}}</view>
							</view>
							<view class=""
								style="flex: 1;margin-left: 5px;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden; text-overflow: ellipsis;line-height: 1.5;height: 1.5em;white-space: normal;word-break: break-all;">
								{{message.dataContent.nickname}}
							</view>
						</view>
					</view>

					<view :class="'message-body self1'" v-if="message.contentType == 8" @tap="goNavigation(message)">
						<view class="" style="display: flex;align-items: center;flex: 1;">
							<image class="" src="../../../static/image/icon28@3x.png" mode="aspectFit"
								style="width: 30px;height: 30px;"></image>
							<view class="" style="flex: 1;margin-left: 5px;">
								<view class=""
									style="display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden; text-overflow: ellipsis;line-height: 1.5;height: 1.5em;white-space: normal;word-break: break-all;">
									{{message.dataContent.name}}
								</view>
								<view class=""
									style="font-size: 12px;color: #999;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden; text-overflow: ellipsis;line-height: 1.5;height: 1.5em;white-space: normal;word-break: break-all;">
									{{message.dataContent.address}}
								</view>
							</view>
						</view>
					</view>

					<image :class="'message-red1'" v-if="message.contentType == 10" :src="'../../static/chat/1@3x.png'"
						class="" mode="widthFix" @tap="receiveRed(message)">
					</image>

					<view :class="'message-body self1'" v-if="message.contentType == 11" @tap="goNavigation(message)">
						<view class="" style="display: flex;align-items: center;flex: 1;">
							<image v-if="message.dataContent.length > 0" :src="message.dataContent.pictures[0]"
								class="name-img1"></image>
							<view class="" style="flex: 1;margin-left: 5px;">
								<view class=""
									style="display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden; text-overflow: ellipsis;line-height: 1.5;height: 1.5em;white-space: normal;word-break: break-all;">
									{{message.dataContent.title}}
								</view>
								<view class=""
									style="font-size: 12px;color: #999;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden; text-overflow: ellipsis;line-height: 1.5;height: 1.5em;white-space: normal;word-break: break-all;">
									{{message.dataContent.content}}
								</view>
							</view>
						</view>
					</view>

				</view>
			</checkbox-group>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				startX: 0, // 触摸开始的X坐标
				endX: 0, // 触摸结束的X坐标
				threshold: 50, // 设置滑动多少距离后触发返回
				keyword: '',
				actionStyle: {
					color: '#b0b0b0',
					fontWeight: '300',
				},
				tabindex: 0,
				list1: [
						{
						name: '全部类型',
						index: 0,
					},
					{
						name: '文字',
						index: 1,
					}, {
						name: '图片',
						index: 2,
					},
					{
						name: '视频',
						index: 3,
					},
					{
						name: '语音',
						index: 5,
					},
				],
				checkboxValue1: [],

				listData: [],

				checkboxList:[],
				type: ''
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}
			this.clickTabs({
				index: 0
			});
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			clickTabs(item) {
				console.log(item);
				this.tabindex = this.list1[item.index].index;
				console.log(this.tabindex);
				let where = '';
				switch (this.tabindex) {
					case 0:
						where = `is_collect = 1`
						break
					case 1:
						where = `is_collect = 1 and chat_type = 0`
						break
					case 2:
						where = `is_collect = 1 and chat_type = 1`
						break
					case 3:
						where = `is_collect = 1 and chat_type = 6`
						break
					case 5:
						where = `is_collect = 1 and chat_type = 2`
						break
					case 6:
						where = `is_collect = 1 and chat_type = 8`
						break
					case 7:
						where = `is_collect = 1 and chat_type = 7`
						break
				}


				this.selectTableData(where);
			},

			selectTableData(where) {
				let open = this.DB.isOpen();
				if (open) {

					// 查询表 DB.selectTableData(表名,查询条件列名,查询条件列值)
					this.DB.selectTableDataNew("chat"+uni.getStorageSync("user_uid"), where)
						.then(res => {
							console.log("contact表数据-=-=-=-==-==-", res);



							this.listData = [];
							res.map(item => {
								console.log(item)
								let chatMsg = this.constructMessage(item);
								chatMsg.checked = false;

								this.listData.push(chatMsg);

							})
							this.$forceUpdate();
							console.log(this.listData)
							setTimeout(() => {
								// this.$refs.scrollView.scrollToBottom(); // 滚动到底部
								// this.scrollToBottom();

							}, 500)
							// this.listData = res;
						})
						.catch(error => {
							console.log("查询失败", error);
							// this.createTable();
							if (error.code == '-1404') {
								this.createTable();
							}

						});


				} else {
					this.$util.toast("数据库未打开");
				}

			},


			constructMessage(p) {

				let nicknamehashMap = uni.getStorageSync('nicknamehashMap');
				let avatarhashMap = uni.getStorageSync('avatarhashMap');

				let nickname = '';
				let avatar = '';
				if (nicknamehashMap) {
					nicknamehashMap = new Map(JSON.parse(nicknamehashMap));

					nickname = nicknamehashMap.get(p.from) ?? '';
				}
				if (avatarhashMap) {
					avatarhashMap = new Map(JSON.parse(avatarhashMap));

					avatar = avatarhashMap.get(p.from) ?? '';
				}

				let chatMsg = {};
				let dataContent = JSON.parse(p.dataContent);

				chatMsg.from1 = dataContent.f
				chatMsg.dataContent = dataContent.m
				chatMsg.quote_fp = dataContent.quote_fp
				chatMsg.quote_sender_uid = dataContent.quote_sender_uid
				chatMsg.quote_sender_nick = dataContent.quote_sender_nick
				chatMsg.quote_status = dataContent.quote_status
				chatMsg.quote_content = dataContent.quote_content
				chatMsg.quote_type = dataContent.quote_type

				if (dataContent.ty == 7 || dataContent.ty == 10 || dataContent.ty == 11) {
					chatMsg.dataContent = JSON.parse(dataContent.m)
				}
				chatMsg.time = p.time; // uni.MBUtils.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
				chatMsg.contentType = dataContent.ty
				chatMsg.fp = p.fp;
				chatMsg.is_collect = 0;
				if (p.is_collect) {
					chatMsg.is_collect = p.is_collect;
				}
				if (p.typeu == 44 || p.typeu == 45) {
					chatMsg.nickname = dataContent.nickName
				} else if (p.typeu == 3) {
					if (dataContent.f == this.fromUserId) {
						chatMsg.nickname = uni.getStorageSync('nickname') ?? ''
					} else {
						chatMsg.nickname = nickname
					}

				}
				chatMsg.nickname = dataContent.nickName


				if (dataContent.ty == 2) {
					chatMsg.contentDuration = dataContent.contentDuration;
					chatMsg.anmitionPlay = false;

					// if(!dataContent.contentDuration){
					// 	chatMsg.contentDuration = 0;
					// }
				}


				console.log('constructMessage');
				return chatMsg;


			},
			
			
			click(item) {
				console.log('item', item);
			},
			checkboxChange(n) {
				console.log('change', n);
				console.log(n.detail.value);
				this.checkboxList = n.detail.value
			},
			sendmsg(){
				if (this.type == 1) {
					let pages = getCurrentPages();
					if (pages.length >= 2) {
						let list = [];
						
						for(let i=0;i<this.checkboxList.length;i++){
							let item = this.listData[this.checkboxList[i]]
							list.push(item);
						}
						
						
				
				
						let prePage = pages[pages.length - 2]; // 上一页面
						prePage.$vm.getcollect(list);
				
						uni.navigateBack();
					}
					return;
				}
			},

			oneye() {
				console.log(111)
				this.passwordShow = false
				this.show = false
			},
			oneyeOpen() {
				console.log(222)
				this.passwordShow = true
				this.show = true

			},
			oneye1() {
				this.passwordShow1 = false
				this.show1 = false
			},
			oneyeOpen1() {
				this.passwordShow1 = true
				this.show1 = true
			},
			change(e) {
				console.log('change', e);
			},
			change1(e) {
				console.log('change', e);
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		.container {
			width: 100%;
			height: 100%;
		}

		overflow: hidden;
	}

	.status_bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50upx;
	}

	.status_bar,
	.head {
		background-color: #fff;
		height: 160upx;
	}

	.con-box {
		width: 94%;
		margin-left: 3%;
		background-color: #fff;
		margin-top: 20upx;
		border-radius: 20upx;
		// padding: 10upx 30upx;
		color: #2e2e2e;

	}

	.select-box {
		margin: 10upx 1% 0 2%;

		.name-img {
			width: 80upx;
			height: 80upx;
			border-radius: 10upx;
			background: #d54827;
			font-size: 36upx;
			text-align: center;
			line-height: 80upx;
			color: #fff;
			margin-left: 10upx;

		}
	}


	.message-body {
		max-width: 70%;
		background-color: #e5e5ea;
		border-radius: 10px;
		padding: 8px;
		word-break: break-all;
		//margin-right: 5%;
	}

	.quote-message-body {
		max-width: 80%;
		background-color: #e5e5ea;
		border-radius: 10px;
		padding: 8px;
		word-break: break-all;
		font-size: 12px;
		margin-left: auto;
		//margin-right: 5%;
		display: flex;
		align-items: center;
		float: right;
	}

	.quote-message-body1 {
		max-width: 80%;
		background-color: #e5e5ea;
		border-radius: 10px;
		padding: 8px;
		word-break: break-all;
		font-size: 12px;
		margin-left: 10px;
		display: flex;
		align-items: center;
		float: left;
	}

	.message-img {
		max-width: calc(70vw - 110rpx);
		max-height: calc(70vw - 110rpx);
		border-radius: 10px;

		word-break: break-all;
		float: right;
	}

	.message-img1 {
		max-width: calc(70vw - 110rpx);
		max-height: calc(70vw - 110rpx);
		border-radius: 10px;

		word-break: break-all;
		float: left;
	}

	.message-red {
		width: 70%;
		margin-left: 30%;
		word-break: break-all;
	}

	.message-red1 {
		width: 70%;
		margin-right: 30%;
		word-break: break-all;
	}

	.self {
		margin-left: auto;
		background-color: #0084ff;
		color: white;
	}

	.self1 {
		//margin-left: auto;
		background-color: #e6e6ac;
		color: white;
		margin-left: 10px;
	}

	.message-text {
		word-break: break-all;
	}

	.img {
		width: 200rpx;
		height: auto;
		max-width: 300rpx;
		max-height: 400rpx;
		margin: 10upx;
	}

	.message-item {
		width: 100%;
		display: flex;
		margin-bottom: 10px;
		// margin-left: 30%;
		float: right;
		//align-items: flex-start;
		//float: right;
	}

	.message-item1 {
		width: 100%;
		display: flex;
		margin-bottom: 10px;

		//margin-left: 30%;
		//align-items: flex-start;
		//float: right;
	}


	.message-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
		overflow: hidden;
	}

	.self {
		margin-left: auto;
		background-color: #e6e6ac;
		color: white;
	}

	.other {
		background-color: #e5e5ea;
	}

	.message-time {
		font-size: 12px;
		color: #999;
		margin-top: 3px;
	}

	.name-img {
		width: 90upx;
		height: 90upx;
		border-radius: 50%;
		background: #d54827;
		font-size: 36upx;
		text-align: center;
		line-height: 90upx;
		color: #fff;
		margin-left: 10upx;
		margin-right: 10upx;
		margin-top: 10upx;
	}

	.name-img1 {
		width: 90upx;
		height: 90upx;
		border-radius: 5px;
		background: #d54827;
		font-size: 36upx;
		text-align: center;
		line-height: 90upx;
		color: #fff;

	}

	.voice_icon {
		height: 34rpx;
		width: 34rpx;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.voice_icon_right {
		background-image: url('/static/chat/voice-left-3.png');
		margin-left: 10rpx;
	}

	.voice_icon_left {
		background-image: url('/static/chat/voice-right-3.png');
		margin-right: 10rpx;
	}

	.voice_icon_right_an {
		animation: voiceAn_right 1s linear alternate infinite;
	}

	.voice_icon_left_an {
		animation: voiceAn_left 1s linear alternate infinite;
	}

	@keyframes voiceAn_right {
		0% {
			background-image: url('/static/chat/voice-left-1.png');
		}

		50% {
			background-image: url('/static/chat/voice-left-2.png');
		}

		100% {
			background-image: url('/static/chat/voice-left-3.png');
		}
	}

	@keyframes voiceAn_left {
		0% {
			background-image: url('/static/chat/voice-right-1.png');
		}

		50% {
			background-image: url('/static/chat/voice-right-2.png');
		}

		100% {
			background-image: url('/static/chat/voice-right-3.png');
		}
	}


	.flex-row {
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.flex-column {
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.packer-box {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		color: rgb(235, 205, 153);
		padding: 60rpx;
	}

	.packer-bg {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}

	.packer-top-box {
		width: 600rpx;
		background-color: rgb(244, 94, 77);
		text-align: center;
		margin: auto;
		transform: translateY(-160rpx);
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		position: relative;
	}

	.sender-info {
		margin-top: 200rpx;
		justify-content: center;
		line-height: 60rpx;
		font-size: 36rpx;
	}

	.sender-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-right: 10rpx;
	}

	.packer-greeting {
		font-size: 48rpx;
		line-height: 60rpx;
		height: 120rpx;
		margin: 40rpx 30rpx 200rpx;
	}

	.arc-edge {
		position: relative;
	}

	.arc-edge::after {
		width: 100%;
		height: 200rpx;
		position: absolute;
		left: 0;
		top: -100rpx;
		z-index: 9;
		content: '';
		border-radius: 50%;
		background-color: rgb(244, 94, 77);
		box-shadow: 0 6rpx 6rpx 0 rgba(0, 0, 0, 0.1);
	}

	.packer-bottom-box {
		transform: translate(-50%, 0);
		width: 600rpx;
		height: 360rpx;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		overflow: hidden;
		position: absolute;
		bottom: calc(50% - 440rpx);
		left: 50%;
	}

	.anim-ease-in {
		animation-duration: 0.5s;
		animation-timing-function: ease-in;
		animation-fill-mode: forwards;
	}

	.anim-out-top {
		animation-name: slideOutTop;
	}

	.anim-out-bottom {
		animation-name: slideOutBottom;
	}

	.anim-fade-out {
		animation-name: fadeOut;
	}

	@keyframes fadeOut {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	@keyframes slideOutTop {
		from {
			transform: translateY(-160rpx);
		}

		to {
			transform: translateY(-200%);
		}
	}

	@keyframes slideOutBottom {
		from {
			transform: translate(-50%, 0);
		}

		to {
			transform: translate(-50%, 200%);
		}
	}

	.arc-bottom-edge {
		position: relative;
	}

	.arc-bottom-edge::after {
		width: 120%;
		height: 200rpx;
		position: absolute;
		left: -10%;
		top: -100rpx;
		z-index: 8;
		content: '';
		border-radius: 50%;
		box-shadow: 0 60rpx 0 0 rgb(242, 85, 66);
	}

	.packer-bottom-bg {
		background-color: rgb(242, 85, 66);
		height: 280rpx;
		margin-top: 100rpx;
	}

	.packer-btn {
		border-radius: 50%;
		width: 200rpx;
		height: 200rpx;
		line-height: 200rpx;
		font-size: 80rpx;
		text-align: center;
		color: #333;
		background-color: rgb(235, 205, 153);
		box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.1);
	}

	.packer-btn-pos {
		transform: translateX(-50%);
		position: absolute;
		left: 50%;
		z-index: 10;
		bottom: -200rpx;
	}

	.packer-btn-front {
		position: absolute;
		top: 0;
		transform: translateZ(4px);
	}

	.packer-btn-middle {
		position: absolute;
		top: 0;
		border-radius: 50%;
		width: 200rpx;
		height: 200rpx;
		background-color: rgb(235, 180, 120);
	}

	.anim-rotate {
		margin-left: -100rpx;
		transform-style: preserve-3d;
		animation: rotate 1s linear infinite;
	}

	@keyframes rotate {
		0% {
			transform: rotateY(0deg);
		}

		100% {
			transform: rotateY(360deg);
		}
	}


	.btn-list-grid {
		padding: 20upx 0;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-column-gap: 20upx;
		row-gap: 20upx;

		// grid-template-columns: calc(calc(100% - 10px)/2) calc(calc(100% - 10px)/2);

		.btn-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 120upx;




			.btn-item-flex {
				flex: 1;
				justify-content: center;
				width: 120upx;
				height: 120upx;
				background-color: #EEE;
				border-radius: 10upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
			}

			.icon {
				width: 50upx;
			}

			.text {
				font-size: 24upx;
				margin-top: 4upx;
			}
		}
	}



	.video1 {
		width: 100%;
		height: 100%;
		// top: -20px;
		// left: -5px;
		top: 0;
		// margin-left: -10px;
		z-index: 10000;
		position: fixed;
		background-color: #000000;

		.btn-close-box {
			width: 100%;
			height: 40px;
			padding: 10px 20px 10px 10px;

			top: calc(10px + (var(--status-bar-height)));
			position: fixed;

			.btn-close {
				float: right;
				width: 30px;
				height: 30px;
			}

		}

		video {
			width: 100%;
			margin-top: calc(50px + (var(--status-bar-height)));
			height: calc(100% - calc(50px + (var(--status-bar-height))));
		}
	}
</style>